<template>
  <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible" center append-to-body fullscreen>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-form class="verify-form" :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px">
      <el-divider content-position="center">基础信息</el-divider>
      <el-row>
        <el-col :span="6">
          <el-form-item label="标识" prop="uniqueCode">
            <el-input v-model="personInfo.uniqueCode" placeholder="标识">
              <el-button slot="append">读卡</el-button>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="personInfo.name" placeholder="姓名">
              <el-button slot="append" @click="openDialog('person')">查询</el-button>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="出生年月" prop="birthDay">
            <el-input v-model="personInfo.birthDay" placeholder="出生年月" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="身份证" prop="certificateNum">
            <el-input v-model="personInfo.certificateNum" placeholder="身份证" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="性别" prop="gender">
            <el-input v-if="personInfo.gender == '0'" value="男" placeholder="性别" disabled></el-input>
            <el-input v-else-if="personInfo.gender == '1'" value="女" placeholder="性别" disabled></el-input>
            <el-input v-else value="" placeholder="性别" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系电话" prop="telPhone">
            <el-input v-model="personInfo.telPhone" placeholder="联系电话" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="家庭住址" prop="address">
            <el-input v-model="personInfo.address" placeholder="家庭住址" disabled></el-input>
          </el-form-item>
        </el-col>
       <el-col :span="6">
          <el-form-item label="父亲近视史" prop="fatherMyopia">
            <el-select v-model="personInfo.personExtProp.fatherMyopia">
              <el-option value="0" label="无"></el-option>
              <el-option value="1" label="轻度"></el-option>
              <el-option value="2" label="中度"></el-option>
              <el-option value="3" label="重度"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="母亲近视史" prop="motherMyopia">
            <el-select v-model="personInfo.personExtProp.motherMyopia">
              <el-option value="0" label="无"></el-option>
              <el-option value="1" label="轻度"></el-option>
              <el-option value="2" label="中度"></el-option>
              <el-option value="3" label="重度"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="习惯用手" prop="habitHand">
            <el-radio-group v-model="dataForm.pvmCheckdata.habitHand">
              <el-radio label="Y">右手</el-radio>
              <el-radio label="Z">左手</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="戴镜类型" prop="wareType">
            <el-select v-model="dataForm.pvmCheckdata.wareType">
              <el-option value="1" label="框架眼镜"></el-option>
              <el-option value="2" label="软性隐形眼镜"></el-option>
              <el-option value="3" label="角膜塑形镜"></el-option>
              <el-option value="4" label="不戴镜"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="center">检查结果</el-divider>
      <el-row class="bg-row">
        <el-col :span="8">
          <el-form-item label="学校">
            <el-select v-model="dataForm.pvmCheckdata.schoolId" clearable filterable default-first-option style="min-width: 360px;" @change="schoolChange($event,'','')">
              <el-option v-for="item in schoolOption" :value="item.id" :label="'('+ item.pinyinCode + ')' + item.schoolName" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="年级">
            <el-select v-model="dataForm.pvmCheckdata.gradeId" filterable clearable @change="gradeChange($event,'')">
              <el-option v-for="item in gradeOption" :value="item.id" :label="item.gradeName" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="班级">
            <el-select v-model="dataForm.pvmCheckdata.classId" filterable default-first-option clearable>
              <el-option v-for="item in classOption" :value="item.id" :label="item.className" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="检查时间">
            <el-date-picker v-model="dataForm.pvmCheckdata.checkDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="体重">
            <el-input v-model="dataForm.pvmCheckdata.weight">
              <template slot="append">KG</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身高">
            <el-input v-model="dataForm.pvmCheckdata.height">
              <template slot="append">CM</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="bg-row">
        <table class="miui-table">
          <tr>
            <td width="50px"></td>
            <td>裸眼远视力</td>
            <td>旧镜度数</td>
            <td>生活远视力</td>
            <td>动态屈光检测</td>
            <td>眼前段及眼附属器</td>
            <td>串镜检查</td>
          </tr>
          <tr>
            <td>右眼</td>
            <td>
              <el-form-item prop="pvmCheckdata.nakedOd" label-width="0">
                <el-input style="width: 60px;" v-model="dataForm.pvmCheckdata.nakedOd"></el-input>
              </el-form-item>
            </td>
            <td>
              <el-row>
                <el-col :span="8">
                  <el-form-item prop="pvmCheckdata.djOd01" label-width="0">
                    <el-input style="width: 60px;" v-model="dataForm.pvmCheckdata.djOd01" placeholder="球镜"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="pvmCheckdata.djOd02" label-width="0">
                    <el-input style="width: 60px;" v-model="dataForm.pvmCheckdata.djOd02" placeholder="柱镜"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="pvmCheckdata.djOd03" label-width="0">
                    <el-input style="width: 60px;" v-model="dataForm.pvmCheckdata.djOd03" placeholder="轴向"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </td>
            <td>
              <el-form-item prop="pvmCheckdata.distantOd" label-width="0">
                <el-input style="width: 60px;" v-model="dataForm.pvmCheckdata.distantOd"></el-input>
              </el-form-item>
            </td>
            <td>
              <el-row>
                <el-col :span="8">
                  <el-form-item prop="pvmCheckdata.dtOd01" label-width="0">
                    <el-input style="width: 60px;" v-model="dataForm.pvmCheckdata.dtOd01" placeholder="球镜"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="pvmCheckdata.dtOd02" label-width="0">
                    <el-input style="width: 60px;" v-model="dataForm.pvmCheckdata.dtOd02" placeholder="柱镜"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="pvmCheckdata.dtOd03" label-width="0">
                    <el-input style="width: 60px;" v-model="dataForm.pvmCheckdata.dtOd03" placeholder="轴向"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </td>
            <td>
               <el-radio-group v-model="dataForm.pvmCheckdata.frontOd">
                 <el-radio :label="0">正常</el-radio>
                 <el-radio :label="1">异常发现</el-radio>
               </el-radio-group>
               <el-input style="width: 180px;margin-left: 10px;" v-model="dataForm.pvmCheckdata.frontOdText"></el-input>
            </td>
            <td>
              <el-select v-model="dataForm.pvmCheckdata.refractiveStatus">
                <el-option v-for="item in refractiveStatusOption" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
            </td>
          </tr>
          <tr>
            <td>左眼</td>
            <td>
              <el-form-item prop="pvmCheckdata.nakedOs" label-width="0">
                <el-input style="width: 60px;" v-model="dataForm.pvmCheckdata.nakedOs"></el-input>
              </el-form-item>
            </td>
            <td>
              <el-row>
                <el-col :span="8">
                  <el-form-item prop="pvmCheckdata.djOs01" label-width="0">
                    <el-input style="width: 60px;" v-model="dataForm.pvmCheckdata.djOs01" placeholder="球镜"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="pvmCheckdata.djOs02" label-width="0">
                    <el-input style="width: 60px;" v-model="dataForm.pvmCheckdata.djOs02" placeholder="柱镜"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="pvmCheckdata.djOs03" label-width="0">
                    <el-input style="width: 60px;" v-model="dataForm.pvmCheckdata.djOs03" placeholder="轴向"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </td>
            <td>
              <el-form-item prop="pvmCheckdata.distantOs" label-width="0">
                <el-input style="width: 60px;" v-model="dataForm.pvmCheckdata.distantOs"></el-input>
              </el-form-item>
            </td>
            <td>
              <el-row>
                <el-col :span="8">
                  <el-form-item prop="pvmCheckdata.dtOs01" label-width="0">
                    <el-input style="width: 60px;" v-model="dataForm.pvmCheckdata.dtOs01" placeholder="球镜"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="pvmCheckdata.dtOs02" label-width="0">
                    <el-input style="width: 60px;" v-model="dataForm.pvmCheckdata.dtOs02" placeholder="柱镜"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="pvmCheckdata.dtOs03" label-width="0">
                    <el-input style="width: 60px;" v-model="dataForm.pvmCheckdata.dtOs03" placeholder="轴向"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </td>
            <td>
              <el-radio-group v-model="dataForm.pvmCheckdata.frontOs">
                <el-radio :label="3">正常</el-radio>
                <el-radio :label="6">异常发现</el-radio>
              </el-radio-group>
              <el-input style="width: 180px;margin-left: 10px;" v-model="dataForm.pvmCheckdata.frontOsText"></el-input>
            </td>
            <td>
              <el-select v-model="dataForm.pvmCheckdata.refractiveOsStatus">
                <el-option v-for="item in refractiveStatusOption" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
            </td>
          </tr>
        </table>
      </el-row>
      <el-row class="bg-row">
        <el-col :span="8">
          <el-form-item label="眼位">
            <el-radio-group v-model="dataForm.pvmCheckdata.yw">
              <el-radio :label="0">正位</el-radio>
              <el-radio :label="1">隐斜</el-radio>
              <el-radio :label="2">显斜</el-radio>
            </el-radio-group>
            <el-input v-if="dataForm.pvmCheckdata.yw == 1" style="width: 80px;margin-left: 15px;" v-model="dataForm.ywText01"></el-input>
            <el-input v-if="dataForm.pvmCheckdata.yw == 2" style="width: 80px;margin-left: 15px;" v-model="dataForm.ywText02"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="握笔姿势">
            <el-radio-group v-model="dataForm.pvmCheckdata.correctHold">
              <el-radio :label="0">正确</el-radio>
              <el-radio :label="1">错误</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="集合近点">
            <el-input style="width: 80px;" v-model="dataForm.pvmCheckdata.jhjd"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="色觉">
            <el-radio-group v-model="dataForm.pvmCheckdata.color">
              <el-radio :label="0">正常</el-radio>
              <el-radio :label="1">色弱</el-radio>
              <el-radio :label="2">色盲</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="优势眼">
            <el-radio-group v-model="dataForm.pvmCheckdata.ysy">
              <el-radio :label="0">右眼</el-radio>
              <el-radio :label="1">左眼</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="bg-row">
        <el-col :span="24">
          <el-form-item label="眼病">
            <el-input type="textarea" v-model="dataForm.pvmCheckdata.eyeDisease"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="center">初步诊断</el-divider>
      <el-row class="bg-row">
        <el-col :span="24">
          <el-form-item label="近视预警">
            <el-radio-group v-model="dataForm.pvmCheckdata.earlyWarning">
              <el-radio label="R">红色</el-radio>
              <el-radio label="Y">黄色</el-radio>
              <el-radio label="B">蓝色</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="主检医生">
              <el-select v-model="dataForm.pvmCheckdata.checkDoctor" clearable filterable default-first-option>
                <el-option v-for="item in userOptions" :value="item.id" :label="item.realName" :key="item.id"></el-option>
              </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
    <!-- 弹窗，选择学校 -->
    <search-school v-if="schoolVisible" ref="schoolDialog" @refreshForm="getSchoolData"></search-school>
    <!-- 弹窗，选择年级 -->
    <search-grade v-if="gradeVisible" ref="gradeDialog"  @refreshForm="getGradeData"></search-grade>
    <!-- 弹窗，选择班级 -->
    <search-class v-if="classVisible" ref="classDialog" @refreshForm="getClassData"></search-class>
    <!-- 弹窗，选择人员 -->
    <search-person v-if="personVisible" ref="personDialog" @refreshForm="getPersonData"></search-person>
  </el-dialog>
</template>

<script>
  import { remote } from '@/api/admin/dict'
  import { addObj } from '@/api/pvm/checkdata'

  import { getSchoolOptions, getClassOptions } from '@/api/pvm/school'
  import { getGradeBySchoolId } from '@/api/pvm/grade'

  import { getPersonObj } from '@/api/pvm/person'
  import { getUserListByMenu } from '@/api/admin/user'
  import { mapGetters } from 'vuex'

  import SearchPerson from '@/components/business/person-search'

  export default {
    data() {
      return {
        visible: false,
        schoolOption: [],
        gradeOption: [],
        classOption: [],
        personInfo: {
          cardNumber: '',
          checkUsername: '',
          birthDay: '',
          certificateNum: '',
          gender: '',
          telPhone: '',
          address: '',
          personExtProp: {
            fatherMyopia: '',
            motherMyopia: '',
            habitHand: '',
          },
          wareType: '',
        },
        dataForm: {
          id: 0,
          personInfo: {},
          pvmCheckdata: {
            schoolId: '',
            schoolName: '',
            schoolType: '',
            gradeId: '',
            gradeName: '',
            classId: '',
            className: '',
            createTime: '',
            weight: '',
            height: '',
            nakedOd: '',
            nakedOs: '',
            djOd01: '',
            djOd02: '',
            djOd03: '',
            djOs01: '',
            djOs02: '',
            djOs03: '',
            distantOd: '',
            distantOs: '',
            dtOd01: '',
            dtOs01: '',
            dtOd02: '',
            dtOs02: '',
            dtOd03: '',
            dtOs03: '',
            frontOd: '',
            frontOs: '',
            frontOdText: '',
            frontOsText: '',
            refractiveStatus: '',
            refractiveOsStatus: '',
            yw: '',
            ywText01: '',
            ywText02: '',
            correctHold: '',
            jhjd: '',
            color: '',
            ysy: '',
            eyeDisease: '',
            earlyWarning: '',
            checkDoctor: ''
          }
        },
        dataRule: {
          'pvmCheckdata.nakedOd': [{required: true,message: '裸眼远视力不能为空',trigger: 'blur'}],
          'pvmCheckdata.nakedOs': [{required: true,message: '裸眼远视力不能为空',trigger: 'blur'}],
          'pvmCheckdata.distantOd': [{required: true,message: '生活远视力不能为空',trigger: 'blur'}],
          'pvmCheckdata.distantOs': [{required: true,message: '生活远视力不能为空',trigger: 'blur'}],
          'pvmCheckdata.djOd01': [{required: true,validator: this.checkBallGlassOd,trigger: 'blur'}],
          'pvmCheckdata.djOd02': [{required: true,validator: this.checkPostGlass,trigger: 'blur'}],
          'pvmCheckdata.djOd03': [{required: true,validator: this.checkAxesOd,trigger: 'blur'}],
          'pvmCheckdata.djOs01': [{required: true,validator: this.checkBallGlassOs,trigger: 'blur'}],
          'pvmCheckdata.djOs02': [{required: true,validator: this.checkPostGlass,trigger: 'blur'}],
          'pvmCheckdata.djOs03': [{required: true,validator: this.checkAxesOds,trigger: 'blur'}],
          'pvmCheckdata.dtOd01': [{required: true,validator: this.checkBallGlassOd,trigger: 'blur'}],
          'pvmCheckdata.dtOd02': [{required: true,validator: this.checkPostGlass,trigger: 'blur'}],
          'pvmCheckdata.dtOd03': [{required: true,validator: this.checkAxesOd,trigger: 'blur'}],
          'pvmCheckdata.dtOs01': [{required: true,validator: this.checkBallGlassOs,trigger: 'blur'}],
          'pvmCheckdata.dtOs02': [{required: true,validator: this.checkPostGlass,trigger: 'blur'}],
          'pvmCheckdata.dtOs03': [{required: true,validator: this.checkAxesOds,trigger: 'blur'}],
        },
        userOptions: [],
        refractiveStatusOption: [],
        schoolVisible: false,
        gradeVisible: false,
        classVisible: false,
        personVisible: false
      }
    },
    computed: {
      ...mapGetters(['bizData'])
    },
    components:{
      SearchPerson
    },
    methods: {
      init(data) {
        for(let key in this.dataForm){
          this.dataForm[key] = ''
        }
        this.dataForm.pvmCheckdata = {}
        for(let key in this.personInfo){
          if(key == 'personExtProp'){
            this.personInfo.personExtProp = {
              fatherMyopia: '',
              motherMyopia: '',
              habitHand: ''
            }
          }else{
            this.personInfo[key] = ''
          }
        }
        this.getUsersList()
        this.getSchoolList()
        this.visible = true
        this.$nextTick(() => {
          remote('refractive_status').then(response => {
            this.refractiveStatusOption = response.data.data
          })
          getPersonObj(data.personId).then(response => {
            if(response.data.code == '0'){
              this.personInfo = response.data.data
            }else{
              this.$message.error(response.data.msg)
            }
          })
          this.$set(this.dataForm.pvmCheckdata, 'schoolId', data.schoolId)
          this.schoolChange(data.schoolId,data.gradeId,data.classId)
          this.gradeChange(data.gradeId,data.classId)
        })
      },
      getSchoolList(){
        getSchoolOptions().then(response => {
          if(response.data.code == '0'){
            this.schoolOption = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      schoolChange(schoolId,gradeId,classId){
        this.gradeOption = [],
        this.classOption = [],
        this.$set(this.dataForm.pvmCheckdata, 'gradeId', gradeId)
        this.$set(this.dataForm.pvmCheckdata, 'classId', classId)
        if(schoolId){
          getGradeBySchoolId(schoolId).then(response => {
            if(response.data.code == '0'){
              this.gradeOption = response.data.data
            }else{
              this.$message.error(response.data.msg)
            }
          })
        }
      },
      gradeChange(gradeId,classId){
        this.classOption = [],
        this.$set(this.dataForm.pvmCheckdata, 'classId', classId)
        if(gradeId){
          getClassOptions(this.dataForm.pvmCheckdata.schoolId,gradeId).then(response => {
            if(response.data.code == '0'){
              this.classOption = response.data.data
            }else{
              this.$message.error(response.data.msg)
            }
          })
        }
      },
      openDialog(type){
        if(type == 'person'){
          this.personVisible = true
          this.$nextTick(() => {
            this.$refs.personDialog.init()
          })
        }
      },
      // 表单提交
      dataFormSubmit() {
        this.dataForm.personInfo = this.personInfo
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            addObj(this.dataForm).then(response => {
              if(response.data.code == '0'){
                this.$message.success('添加成功')
                this.visible = false
              }else{
                this.$message.error(response.data.msg)
              }
            })
          }
        })
      },
      getPersonData(val){
        getPersonObj(val.id).then(response => {
          if(response.data.code == '0'){
            let responseData = response.data.data
            this.personInfo = response.data.data
            this.dataForm.pvmCheckdata = {}
            if(responseData.pvmStudent){
              this.dataForm.pvmCheckdata.schoolId = responseData.pvmStudent.schoolId
              this.dataForm.pvmCheckdata.schoolName = responseData.pvmStudent.schoolName
              this.dataForm.pvmCheckdata.schoolType = responseData.pvmStudent.schoolType
              this.dataForm.pvmCheckdata.gradeId = responseData.pvmStudent.gradeId
              this.dataForm.pvmCheckdata.gradeName = responseData.pvmStudent.gradeName
              this.dataForm.pvmCheckdata.classId = responseData.pvmStudent.classId
              this.dataForm.pvmCheckdata.className = responseData.pvmStudent.className
            }
          }else{
            this.$message.error(response.data.msg)
          }

        })
      },
      //  根据key值获取url
      getPathByKey(key) {
        let obj = {}
        obj = this.bizData.personTypeData.find(item => {
          if (item.key == key) {
            return item
          }
        })
        if (obj) {
          return obj.value
        }
      },
      //  获取用户列表(销售人员)
      getUsersList() { // key = '1'
        let path = this.getPathByKey('1')
        getUserListByMenu({menuUrl: path}).then(response => {
          if(response.data.code == '0'){
            this.userOptions = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .bg-row {
    // background-color: #cadee8;
    padding-left: 15px;
    padding-top: 5px;
  }
  .miui-table {
    width: 100%;
    margin: 10px 0;
    background-color: #b1e2ec3b;

    tr th {
      background-color: #f4f5f7;
    }

    tr th,
    tr td {
      padding: 10px 8px;
      border: solid 1px #e7e7e7;
      text-align: left;
    }

    .miui-table-header td {
      background-color: #7898a8;
      color: #fff;
      text-align: center;
    }

    .miui-table-tbody {
      background-color: #cadee8;
    }
  }
</style>
